/**
 * defaultValue 与 defaultChecked 两个表单元素属性
 *
 *    有时我们期望使用数据区控制表单元素的初始值，但又不希望该元素变成 受控组件，这时就可以使用
 *
 *      value     => defaultValue
 *      checked   => defaultChecked
 *
 *    PS: defaultValue 与 defaultChecked 只是初始阶段生效，后续修改值不会引起相关元素的重新渲染
 */

import React from "react";
import "./App.css";

interface AppProps {}
interface AppState {
  username: string;
  gender: 1 | 2;
}

class App extends React.Component<AppProps, AppState> {
  state: Readonly<AppState> = {
    username: "admin",
    gender: 1,
  };

  render(): React.ReactNode {
    const { username, gender } = this.state;

    return (
      <div>
        <h1>表单</h1>
        <div className="form-item">
          <div className="form-item__label">用户名：</div>
          <div className="form-item__control">
            <input type="text" defaultValue={username} />
          </div>
        </div>

        <div className="form-item">
          <div className="form-item__label">性别：</div>
          <div className="form-item__control">
            <label>
              <input type="radio" name="gender" defaultChecked={gender === 1} />
              <span>男</span>
            </label>

            <label>
              <input type="radio" name="gender" defaultChecked={gender === 2} />
              <span>女</span>
            </label>
          </div>
        </div>

        <button
          onClick={() => {
            this.setState({ username: "张三" });
          }}
        >
          修改 username
        </button>

        <button
          onClick={() => {
            this.setState({ gender: 2 });
          }}
        >
          修改 gender
        </button>
      </div>
    );
  }
}

export default App;
